import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import { Navbar } from '../..';
import * as stories from './navbar.story';
import CommonProps from '../../../.storybook/common-props';

<Meta title="Components/Navbar" />

# Navbar

The navbar component is a responsive and versatile horizontal navigation bar with the following structure:

- `<Navbar/>`: The main container
  - `<Navbar.Brand/>` the **left side**, always visible, which usually contains the logo and optionally some links or icons
    - `<Navbar.Burger/>` the **hamburger** icon, which toggles the navbar menu on touch devices
  - `<Navbar.Menu/>` the **right side**, hidden on touch devices, visible on desktop
  - `<Navbar.Container/>` a container for `navbar-start` or `navbar-end` (left or right)
    - `<Navbar.Item>` each **single item** of the navbar, which can either be an a or a div
      - `<Navbar.Link/>` a **link** as the sibling of a dropdown, with an arrow
      - `<Navbar.Dropdown/>` the **dropdown menu**, which can include navbar items and dividers
        - `<Navbar.Divider/>` a **horizontal line** to separate navbar items

## Props

<ArgsTable of={Navbar} />

## Components

### `Navbar.Brand`
The left side, always visible, which usually contains the logo and optionally some links or icons

<ArgsTable of={Navbar.Brand} />

### `Navbar.Burger`
The hamburger icon, which toggles the navbar menu on touch devices

<ArgsTable of={Navbar.Burger} />

### `Navbar.Menu`
the right side, **hidden on touch devices**, visible on desktop

<ArgsTable of={Navbar.Menu} />

### `Navbar.Container`
This is a container for the `Menu.Item` can be align to the `start` or `end` (left or right) using the **align** prop

<ArgsTable of={Navbar.Container} />

### `Navbar.Item`
A single item of the navbar, ussualy rendered as an `a` or a `div`, can be used as a container for `Menu.Link` and `Menu.Dropdown`

<ArgsTable of={Navbar.Item} />

### `Navbar.Link`
The default type of children of `Navbar.Item`. you should use this component in conjunction with `Navbar.Dropdown` like this, to correctly use dropdowns on the Navbar

```jsx
<Navbar.Item href="#">
  <Navbar.Link>Item</Navbar.Link>
  <Navbar.Dropdown>
    <Navbar.Item href="#">Subitem 1</Navbar.Item>
    <Navbar.Item href="#">Subitem 2</Navbar.Item>
  </Navbar.Dropdown>
</Navbar.Item>
```

<ArgsTable of={Navbar.Item} />

### `Navbar.Dropdown`
Container for `Navbar.Item`'s that will be hidden by default, and will be displayed depending of the props of the parent `Navbar.Item`

<ArgsTable of={Navbar.Dropdown} />

### `Navbar.Divider`
An divider for items inside the `Navbar.Dropdown`

<ArgsTable of={Navbar.Divider} />

<CommonProps />

## Example

<Canvas>
  <Story story={stories.Default} name="Navbar" />
</Canvas>

## Related

- [Official documentation](https://bulma.io/documentation/components/navbar/)
